<template>
    <div>
        <!--文章模块-头部-->
        <el-row>
            <el-col :span="2">
                <span style="font-weight: bolder;color:#444"><i class="el-icon-document"></i>最新博文</span>
            </el-col>
            <el-col :span="1" :offset="20">
                <p class="text-right"><a href="/pBlogList/all">更多</a></p>
            </el-col>
        </el-row>
        <!--文章模块-内容-->
        <el-row>
            <el-col class="top-subject-container" :span="12" v-for="(a,index) in articleList" :key="index">
                <div class="top-subject">
                    <p class="article-title"><a :href="'/pBlogDetails?catalog='+a.catalog+'&aid='+a.aid">{{a.title}}</a></p>
                    <p class="article-content">{{a.summary}}</p>
                    <p class="article-review"><span>{{a.catalogName}}</span>&nbsp;<span><i class="el-icon-date"></i>&nbsp;{{a.createTime}}</span> <span
                            class="num"><i class="el-icon-view"></i>&nbsp;{{a.browseNumber}}</span></p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    /*
    //引入ElementUI的类库
    import Vue from 'vue';
    //引入所需的组件
    import {Row,Col} from 'element-ui';
    //引入组件的样式表
    import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(Row);
    Vue.use(Col);
    */

    import request from "@/util/request";

    export default {
        name: "MyTopicSubject",
        data() {
            return {
                articleList: []
            }
        },
        mounted() {
            this.initTopArticleList();
        },
        methods:{
            initTopArticleList(){
                request.get('/blog/article/top/4').then(resp => {
                    if (resp.data.code === 200) {
                        //console.log(resp.data.data);
                        this.articleList = resp.data.data;
                        //console.log("是否登录：" + this.isLogin);
                    }
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>

<style scoped>

    .text-right a{
        color: #666;
        text-decoration: none;
        font-size: small;
    }

    .top-subject {
        background-color: #FFF;
        border: 1px solid #ddd;
        margin: 6px;
        border-radius: 4px;
    }
    .top-subject p{
        margin: 12px;
    }

    .top-subject:hover {
        box-shadow: 0 5px 12px rgba(204,204,204,1.0);
        cursor: pointer;
    }

    .article-title a{
        color: #336699;
        text-decoration: none;
        font-weight: bolder;
    }
    .article-content {
        color: #999999;
    }

    .article-review{
        font-size: x-small;
        color: #ccc;
        text-align: end;
    }

</style>